<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <style>
        .content {
            box-sizing: border-box;
            padding: 30px;
            margin: 0 auto;
            width: 800px;
            height: 600px;
            text-align: center;
            background-color: antiquewhite;
        }

        input {
            width: 80px;
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th {
            background-color: aquamarine;
        }

        th,
        td {
            width: 80px;
            height: 30px;
        }

        table {
            margin: 0 auto;
        }

        button {
            background-color: aqua;
            border: 0;
            border-radius: 6px;
        }
        .total{
            margin: 0 auto;
            width: 470px;
            text-align: end;
        }
    </style>
</head>

<body>
    <div class="content">
        <h2>新增学生信息</h2>
        <form class="info" action="" autocomplete="off">
            姓名：<input type="text" name="uname">
            年龄：<input type="number" name="age">
            性别：<select name="gender" id="">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            地区：<select name="address" id="">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="杭州">杭州</option>
                <option value="苏州">苏州</option>
            </select>
            <button class="add">录入</button>
        </form>
        <h2>学生信息表</h2>
        <div class="total">共12条数据</div>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>地区</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>

    </div>
    <script>
       
        // 获取用户输入内容
        const uname = document.querySelector('[name=uname]')
        const age = document.querySelector('[name=age]')
        const gender = document.querySelector('[name=gender]')
        const address = document.querySelector('[name=address]')
        // 表单对象
        const info = document.querySelector('.info')
        // tbody对象
        const tb = document.querySelector('tbody')
        // 输入框对象
        const items = document.querySelectorAll('[name]')
         // 创建数组对象
         const arr = JSON.parse(localStorage.getItem('data')) || []
        getTable()
        info.addEventListener('submit', function (e) {
            // 阻止默认事件
            e.preventDefault()
            // 判断输入内容是否为空
            for (let i = 0; i < items.length; i++) {
                if (items[i].value === '') {
                    return alert('内容不能为空')
                }
            }
            // 将用户输入内容添加到数组中
            const item = { id: arr.length?[arr.length-1].id + 1:1, name: uname.value, age: age.value, gender: gender.value, address: address.value }
            arr.push(item)
            // 表单重置
            this.reset()
            localStorage.setItem('data',JSON.stringify(arr))
            // 打印表格
            getTable()
        })
        // 删除按钮点击事件
        tb.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                // 删除数组中数据
                if (confirm('确认删除数据？')) {
                    arr.splice(+e.target.dataset.id, 1)
                    localStorage.setItem('data',JSON.stringify(arr))
                    getTable()
                }

            }
        })
        
        // 渲染表格内容
        function getTable() {
            // 表格重置
            tb.innerHTML = ''
            const newArr = arr.map(function (ele, index) {
                return `
                <tr>
                    <td>${ele.id}</td>
                    <td>${ele.name}</td>
                    <td>${ele.age}</td>
                    <td>${ele.gender}</td>
                    <td>${ele.address}</td>
                    <td><a href="javascript:;" data-id="${index}">删除</a></td>
                </tr>`
            })
            tb.innerHTML = newArr.join('')
            document.querySelector('.total').innerHTML=`共${arr.length}条数据`
        }

    </script>
</body>

</html>